<template>
  <div>
    <div id="main" style="width: 100%;height:400px;"></div>
  </div>
</template>

<script>
import { orderbytime } from "../../api/order";
import * as echarts from "echarts";
export default {
  data() {
    return {
      list: [],
      date:[]
    };
  },
  methods: {
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.list,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  mounted() {
    orderbytime()
      .then((res) => {
        console.log(res.data);
        for (var i = 0; i < res.data.length; i++) {
          var count = 0;
          for (var j = 0; j < res.data[i].length; j++) {
            count += res.data[i][j].price;
          }
          this.list.push(count);
        }
      })
      .then(() => {
        this.myEcharts();
      });
  },
};
</script>

<style scoped></style>
